<div class="panel-manage">	
	<div class="navbar navbar-inverse">
		<div class="navbar-inner">	
			<div class="text-right">		
		    	<button class="btn btn-primary" id="btn-add-cafe">เพิ่มร้านใหม่</button>
		    </div>
		</div>
	</div>
	<div class="panel-message"></div>
	<table class="table table-striped">
		<thead>
			<tr style="background-color:brown; color:#fff; border:1px;">
				<th style="width:8%;"></th>
				<th style="width:17%;">รหัสร้าน</th>
				<th style="width:50%;">ชื่อร้าน</th>
				<th style="width:15%;">สถานะ</th>
				<th style="width:10%;"></th>			
			</tr>
		</thead>
		<tbody>		
		<?php for ($i=0; $i<count($data); $i++): ?>
			<tr>
				<td><img src="<?php print $data[$i]['CAF_IMG_L_FILENAME']; ?>" style="width:30px; height:30px;" /></td>
				<td><?php print $data[$i]['CAF_CODE']; ?></td>
				<td>
					<span class="block"><b><?php print $data[$i]['CAF_TITLE']; ?></b></span>
					<small class="block"><i><?php print $data[$i]['CURRENT_PACKAGE_NAME']; ?></i></small>
				</td>
				<td>
					<input type="hidden" name="c" value="<?php print $data[$i]['CAF_NAME']; ?>" />
					<div class="switch switch-mini switch-state" data-on="success" data-off="danger">
						<?php if ($data[$i]['CAF_STATUS']): ?>
					    	<input type="checkbox" checked />
					    <?php else: ?>
					    	<input type="checkbox"  />
					    <?php endif; ?>
					</div>
				</td>
				<td>				
					<div class="btn-group">
						<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
							จัดการ <span class="caret"></span>
						</a>
						<ul class="dropdown-menu" style="margin-left:-100px;">
							<li><a href="<?php print base_url() . $data[$i]['CAF_NAME']; ?>" target="_blank"><i class="icon-list-alt"></i> ไปยังหน้าร้าน</a></li>
							<li><a href="<?php print base_url() . $data[$i]['CAF_NAME'] . '/backend'; ?>"><i class="icon-cog"></i> จัดการร้าน</a></li>
							<li><a href="<?php print base_url() . $data[$i]['CAF_NAME'] . '/backend/package'; ?>"><i class="icon-gift"></i> สั่งซื้อแพ็กเก็จ</a></li>
							<li><a class="btn-remove-item-cafe btn-hover"><i class="icon-remove"></i> ลบ</a></li>
						</ul>
					</div>
				</td>
			</tr>
		<?php endfor;?>
		</tbody>
	</table>
</div>

<script type="text/javascript">
	function create_remove_item_cafe_modal(code, oRow){
		var html = '<div id="modal-remove-item-cafe" class="modal hide fade">';		
		html += '<div class="modal-header">';
		html += '	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
		html += '	<h3>ลบร้าน</h3>';
		html += '</div>';
		html += '<div class="modal-body">';		
		html += 'ยืนยันการลบร้าน ' + code
		html += '</div>';
		html += '<div class="modal-footer">';
		html += '	<div id="panel-message" class="text-left"></div>';
		html += '	<button class="btn" data-dismiss="modal" aria-hidden="true">ยกเลิก</button>';
		html += '	<button class="btn btn-primary" id="btn-remove-item-cafe">บันทึก</button>';
		html += '</div>';	
		html += '</div>';
		$('body').append(html);

		$('#modal-remove-item-cafe').modal('show');
		$('#modal-remove-item-cafe').on('hide', function(){
			$(this).remove();
		});

		$('#modal-remove-item-cafe #btn-remove-item-cafe').click(function(){
			$('#modal-remove-item-cafe button').attr('disabled','disabled');
						
			$.post('<?php print base_url() . 'member/cafe/ajax_remove_item'; ?>', { c : code }, function(output){
				switch (output.result){
					case true: case false:{
						var html;
						if (output.result)
							html = '<div class="alert alert-success">' + output.message + '</div>';
						else
							html = '<div class="alert alert-error">' + output.message + '</div>';
							
						$('#modal-remove-item-cafe #panel-message').html(html);						
						setTimeout(function(){							 
							$('#modal-remove-item-cafe').modal('hide');
							oRow.fadeOut(1000);	
						}, 1000);																		
					}
					break;
					default:
						var html = '<div class="alert alert-error">' + output.message + '</div>';
						$('#modal-add-cafe #panel-message').html(html);
						$('#modal-add-cafe button').attr('disabled','disabled');
						setTimeout(function(){ window.location.href = output.redirect_url }, 2000);						
					break;
				}
			},'json');
		});
	}
	function create_add_cafe_modal(url_action, id){
		var html = '<div class="wizard" id="wizard-cafe">';
		
		if (id !== null)
			html += '<input type="hidden" value="' + id + '" />';
		
		html += '<h1>เพิ่มร้านใหม่</h1>';
		html += '<div class="wizard-card" data-cardname="laws">';
		html += '	<h3>กฎข้อบังคับ</h3>';
		html += '	<div class="wizard-input-section">';		
		html += '		<ol start="1">';
		html += '			<li>ไม่อนุญาติให้เผยแพร่ข้อมูลที่กล่าวอาฆาตมาดร้ายต่อสถาบันพระมหากษัตริย์</li>';
		html += '			<li>ข้อมูลสินค้าที่เพิ่มไป เช่น ชื่อสินค้า รูปภาพ เป็นต้น จะต้องเกี่ยวข้องกับกาแฟ เครื่องดื่มและอาหาร หรืออุปกรณ์เกี่ยวกับร้านกาแฟเท่านั้น</li>';
		html += '			<li>หากมีร้านค้าใดที่ถูกสร้างขึ้น แต่ไม่มีการเพิ่มข้อมูลใดๆ เป็นระยะเวลานาน (ขึ้นอยู่กับดุลยพินิจ) ทางทีมงานจะลบข้อมูลร้านค้านั้น</li>';
		html += '			<li>หากข้อมูลต่างๆ ที่ท่านเพิ่มไปผิดกฎข้อใดข้อหนึ่งทางทีมงานจะขอลบข้อมูลนั้นโดยมิต้องแจ้งเตือนให้ทราบล่วงหน้า เพื่อให้เป็นไปตามนโยบายของทางเว็บไซต์';
		html += '		</ol>';
		html += '	</div>';
		html += '</div>';
		html += '<div class="wizard-card" data-cardname="title">';
		html += '	<h3>ระบุชื่อร้าน</h3>';
		html += '	<div class="wizard-input-section">';		
		html += '		<div class="control-group">';
		html += '			<input name="acct" type="text" class="input-xlarge" data-validate="validateTitle" />';
		html += '		</div>';
		html += '		<div class="alert alert-info">';
		html += '			<i class="icon-info-sign"></i> ระบุชื่อร้านค้ากาแฟของท่าน';
		html += '		</div>';
		html += '	</div>';
		html += '</div>';
		html += '<div class="wizard-card" data-cardname="link">';
		html += '	<h3>สร้างลิงค์</h3>';
		html += '	<div class="wizard-input-section">';
		html += '		<div class="alert alert-info">';
		html += '			<small><strong>คำแนะนำ</strong> ลิงค์ร้านนี้ใช้สำหรับอ้างอิงหน้าเพจของร้าน ลิงค์ของร้านควรเป็นตัวอักษรภาษาอังกฤษ (A-Z) และตัวเลข (0-9) เท่านั้น และควรมีจำนวนอักขระ 5 - 12 ตัว</small>';
		html += '		</div>';		
		html += '		<div class="control-group">';		
		html += '			<span"><?php print base_url(); ?></span>';
		html += '			<input type="text" name="accn" class="span1 validate-input" maxlength="12" data-validate="validateName" />';
		html += '			<a class="btn btn-mini btn-inverse" id="btn-check-name">ตรวจสอบ</a>';		
		html += '		</div>';		
		html += '		<div id="checking-message"></div>';
		html += '		<input type="hidden" name="pass" value="0" />';
		html += '	</div>';		
		html += '</div>';		
		html += '<div class="wizard-card" data-cardname="option">';
		html += '	<h3>บริการเสริม</h3>';
		html += '	<div class="wizard-input-section">';		
		html += '		<ul class="unstyled" id="list-option"></ul>';				
		html += '	</div>';
		html += '</div>';			
		html += '<div class="wizard-error">';
		html += '	<div class="alert alert-error"></div>';
		html += '	<a class="btn btn-primary btn-wizard-finish">กลับ</a>';
		html += '</div>';
		html += '<div class="wizard-failure">';
		html += '	<div class="alert alert-error"></div>';
		html += '	<a class="btn btn-primary btn-wizard-finish">กลับ</a>';
		html += '</div>';
		html += '<div class="wizard-success">';
		html += '	<div class="alert alert-success"></div>';
		html += '	<p>ท่านสามารถเพิ่มเติมข้อมูลรายละเอียดอื่นๆ ได้ที่เมนู <b>"จัดการร้าน"</b></p>';					
		html += '	<a class="btn btn-primary btn-wizard-finish">เสร็จสิ้น</a>';				
		html += '</div>';
		html += '</div>';
		$('body').append(html);

		$('#modal-add-cafe').modal('show');
		$('#modal-add-cafe').on('hide', function(){
			$(this).remove();
		});
		
		$.fn.wizard.logging = false;
		var wizard = $("#wizard-cafe").wizard({ submitUrl : url_action });

		// load data
		$.post('<?php print base_url() . 'member/cafe/ajax_get_cafe_type'; ?>', function(output){
			for (i=0; i<output.length; i++){
				wizard.el.find('#list-option').append('<label class="checkbox"><input type="checkbox" name="actp[]" value="' + output[i].id + '">' + output[i].name + '</label>');
			}			
		}, 'json');	
		
		// check name event
		$('#btn-check-name').click(function(e){
			e.preventDefault();
			$.post('<?php print base_url() . 'member/cafe/ajax_check_name'; ?>', { accn : wizard.el.find('input[name=accn]').val() }, function(output){
				var html = '';
				if (output.result)
					html += '<div class="alert alert-success"><i class="icon-ok"></i> ';
				else
					html +=	'<div class="alert alert-error"><i class="icon-warning-sign"></i> ';
				html += output.message + '</div>';
				wizard.el.find('#checking-message').html(html);				
			},'json');
		});
		
		wizard.show();		
		wizard.on('submit', function(wizard){			
			$.ajax({
		        type: 'POST',
		        url: wizard.args.submitUrl,
		        data: wizard.serialize(),		        
		        success: function(output) {
		            output = JSON.parse(output);					
					switch (output.result){
					    case -2: case -1:{
					    	alert(output.message);
							setTimeout(function(){ window.location.href = output.redirect_url; },2000)
					    }
					    break;
					    default:{
					    	if (output.result){						
								wizard.el.find('.wizard-success').find('.alert').html(output.message);						
								wizard.submitSuccess();							
							} else {						
								wizard.el.find('.wizard-error').find('.alert').html(output.message);
								wizard.el.find('.wizard-failure').find('.alert').html(output.message);								
								wizard.submitSuccess();
							}
							wizard.hideButtons();
				            wizard.updateProgressBar(0);
							//setTimeout(function(){ window.location.reload() }, 1000);
					    }
					    break;
					  }
		        },
		        error: function() {
		            wizard.submitFailure();
		            wizard.hideButtons();
		        },
		    });
		});		
		wizard.on("reset", function(wizard) {
			wizard.setSubtitle('');
			wizard.remove();
		});	
		wizard.el.find(".btn-wizard-finish").click(function() {
			wizard.reset().close();
			$('#wizard-cafe').remove();
			window.location.reload();
		});
		wizard.el.find('.wizard-close').click(function(){
			$('#wizard-cafe').remove();
		});		
	}
	function validateTitle(el){
		var name = el.val();
	    var retValue = {};
	 
	    if (name == "") {
	        retValue.status = false;
	        retValue.msg = 'โปรดระบุชื่อสินค้า';
	    }else
	        retValue.status = true;	 
	    return retValue;
	}
	function validateName(el){
		var name = el.val();
		var retValue = {};
		
		$.ajax({
			type: 'post',
			url: '<?php print base_url() . 'member/cafe/ajax_check_name'; ?>',
			data: { accn : name },
			async: false,			
			dataType: 'json',
			success: function(output){				
				if (output.result){					
					retValue.status = true;
					retValue.msg = output.message;
				} else {
					retValue.status = false;
					retValue.msg = output.message;
				}
			}
		});
		return retValue;
	}
	$(function(){
		$('.tooltips').tooltip();	

		$('.switch-state').on('switch-change', function (e, data) {
			var cafe_name = $(this).parents('td').find('input[name=c]').val();			

		 	$.post('<?php print base_url(); ?>' + cafe_name + '/backend/general/info/ajax_change_state', { s : data.value }, function(output){
			    switch (output.result){
				    case -2: case -1:{
				    	window.location.href = '<?php print base_url(); ?>member';
				    }
				    break;
			    }			    
		    }, 'json');
		});
		
		$('#btn-add-cafe').click(function(){			
			create_add_cafe_modal('<?php print base_url() . 'member/cafe/ajax_save'; ?>');
		});
		$('.btn-remove-item-cafe').click(function(){						
			create_remove_item_cafe_modal($(this).parents('tr').children('td:eq(1)').text(), $(this).parents('tr'));			
		});
	});
</script>